<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VUI</title>
<!-- css -->
<link id="v_theme" href="../src/css/theme/aristo/theme.css" rel="stylesheet" type="text/css" />
<link href="../src/css/primeui-1.1-min.css" rel="stylesheet" type="text/css" />
<!--lib js  -->
<script type="text/javascript" src="../src/lib/vue.js"></script>
<script type="text/javascript" src="../src/lib/jquery.min.js"></script>
<!-- js加载器 -->
<script type="text/javascript">window.AJUI_DIR = '../src/'; // 设置根目录</script>
<script type="text/javascript" src="../src/loader/loader.js"></script>

<link href="../src/css/layout.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/theme.js"></script></head>
<body>

	<div id="page" class="pui-panel ui-widget ui-widget-content">
		<div class="pui-panel-titlebar ui-widget-header ui-helper-clearfix">
			<div class="ui-panel-title">
				<span>VUI实例</span>
				<a class="exit" target="_blank" href="http://git.oschina.net/durcframework/vui">Git</a>
			</div>
			<div class="pui-panel-right">
				<span>主题:
					<select id="theme">
					</select>
				</span>
				<span>AJUI界面库欢迎您,admin</span>
				<a class="exit" href="#">[退出]</a>
			</div>
		</div>
		<div class="pui-panel-content ui-widget-content">
			<div id="tab"></div>
		</div>
	</div>


<script type="text/javascript">
var $theme = $('#theme');
var curframe = null;
VUI
.use('Layout',function(){
	var config = 
	[
		{
 		    id:'1',
 		    text:'VUI',
 		    menu:
 		    [
				{text:'综合',href:'above/above.html'}
 				,{
	 		    	text:'Layout(布局)',
	 		        children:[
	 		        	{text:'Layout(新窗口打开)',href:'layout/layout.html',blank:true}
	 		        ]
		    	}
 				,{
	 		    	text:'Calendar(日历)',
	 		        children:[
	 		        	{text:'Calendar',href:'calendar/calendar.html'}
	 		        ]
		    	}
		    	,{
	 		    	text:'Form(表单)',
	 		        children:[
	 		        	{text:'DatePick',href:'form/datepick.html'}
	 		        	,{text:'Form',href:'form/form.html'}
	 		        ]
		    	}
 		    	,{
	 		    	text:'Grid(表格)',
	 		        children:[
	 		        	{text:'简单表格',href:'grid/base.html'}
	 		        	,{text:'操作列',href:'grid/operate.html'}
	 		        	,{text:'显示行号',href:'grid/rownumber.html'}
	 		        	,{text:'单元格自定义',href:'grid/formater.html'}
	 		        	,{text:'固定列宽',href:'grid/width.html'}
	 		        	,{text:'自适应宽度',href:'grid/autowidth.html'}
	 		        	,{text:'表格勾选',href:'grid/checkbox.html'}
	 		        	,{text:'表格单选',href:'grid/radio.html'}
	 		        	,{text:'翻页',href:'grid/page.html'}
	 		        	,{text:'翻页记忆',href:'grid/cacheCheck.html'}
	 		        	,{text:'水平滚动',href:'grid/scrol.html'}
	 		        	,{text:'无数据',href:'grid/nodata.html'}
	 		        	,{text:'多表格',href:'grid/multiGrid.html'}
	 		        	,{text:'Grid',href:'grid/grid.html'}
	 		        ]
 		    	}
 		    	,{
	 		    	text:'Win(窗体)',
	 		        children:[
	 		        	{text:'Win',href:'win/win.html'}
	 		        	,{text:'隐藏按钮',href:'win/winBtn.html'}
	 		        	,{text:'远程加载',href:'win/url.html'}
	 		        	,{text:'Dialog',href:'win/dialog.html'}
	 		        	,{text:'DialogForm',href:'win/dialogform.html'}
	 		        	,{text:'Msg',href:'win/msg.html'}
	 		        ]
 		    	}
 		    	,{
	 		    	text:'Tab(选项卡)',
	 		        children:[
	 		        	{text:'Tab',href:'tab/tab.html'}
	 		        	,{text:'无内容',href:'tab/nocont.html'}
	 		        ]
 		    	}
 		    	,{
	 		    	text:'Tree(树)',
	 		        children:[
	 		        	{text:'Tree',href:'tree/tree.html'}
	 		        ]
 		    	}
 		    
 		    ]
 		}             
       ,{
           id:'2', 
           text:'文档',
           menu:[{
               text:'文档',
               href:'../../doc/index.html',
               blank:true
             }
           ]
		}
    ];
	
	new VUI.Layout({
		config:config
		,openHandler:function($frame,item,$title) {
			curframe = $frame;
			if(item.text == '文档') {
				window.open(item.href);	
				return;
			}
			if(!item.href) {
				return;
			}
			var themeName = $theme.val();
			var url = item.href + '?theme=' + themeName;
			if(item.blank) {
				window.open(url);				
			}else{
				$title.html(item.text).show();
				$frame.attr('src',url);
			}
		}
		
	});
	
});
//主题
var themes = ['aristo','redmond','bootstrap']
var html = [];
for(var i=0,len=themes.length;i<len;i++) {
	html.push('<option value="'+themes[i]+'">'+themes[i]+'</option>');
}

$theme
.html(html.join(''))
.val('aristo')
.change(function(){
	var themeName = this.value;
	
	window.setTheme(themeName,'../src/css/theme/');
	setChildFrameTheme(themeName);
});

// 设置子iframe主题
function setChildFrameTheme(themeName) {
	var $iframes = $('iframe');
	$iframes.each(function(){
		var src = $(this).attr('src');
		if(src) {
			src = src.substring(0,src.indexOf('?'))
			$(this).attr('src',src + '?theme=' + themeName)
		}
	})
}
</script>
</body>
</html>